<template>
	<div class="container">
		<div class="container-background">
			<AppHeader :title="taskObj.title" :banAnimate="true" backgroundColor="" titleColor="#ffffff">
				<template #left>
					<img @click="onClickLeft" src="@/assets/phoneticPractice/icon-arrow-left-white.png" width="9"
						height="17" />
				</template>
			</AppHeader>
			<div style="height: 74px;"></div>
			<div class="container-background-number">{{ Math.round(taskObj.full_score) }}</div>
			<div class="container-background-better">得分率{{ Math.round(taskObj.full_score) }}%</div>
		</div>
		<!-- 占位盒子 -->
		<div class="fillBox"></div>
		<div class="container-task">
			<div class="container-task-context">
				<div>单词个数</div>
				<div>{{ taskObj.question_num }}</div>
			</div>
			<div class="container-task-context">
				<div>跟读用时</div>
				<div>{{ taskObj.use_time }}</div>
			</div>

			<div class="container-task-expression">
				<div>
					<img src="@/assets/phoneticPractice/编组@3x.png" />
					<span>{{ taskObj.green }}个</span>
				</div>
				<div>
					<img src="@/assets/phoneticPractice/编组备份@3x.png" />
					<span>{{ taskObj.yellow }}个</span>
				</div>
				<div>
					<img src="@/assets/phoneticPractice/编组备份 2@3x.png" />
					<span>{{ taskObj.red }}个</span>
				</div>
			</div>
		</div>
		<div class="container-fraction" v-for="item in taskObj.json" :key="item.id">
			<div class="container-fraction-top">
				<div class="container-fraction-top-left">
					<div :class="item.sourceObj.total_score >= 80 ? 'autoGreed' : ''">
						{{moduleName =='单词' ? item.words :item.name.replace("{", "").replace("}", "") }}
					</div>
					<div v-if="moduleName =='单词'">[{{ item.symbol }}]</div>
					<div v-if="moduleName =='单词'">{{ item.pretations }}</div>
				</div>
				<img @click="playAudio(item.fullVideo)" v-show="item.sourceObj.total_score < 60"
					src="@/assets/phoneticPractice/声音-红@3x.png" />
				<img @click="playAudio(item.fullVideo)"
					v-show="item.sourceObj.total_score > 60 && item.sourceObj.total_score < 80"
					src="@/assets/phoneticPractice/声音-黄@3x.png" />
				<img @click="playAudio(item.fullVideo)" v-show="item.sourceObj.total_score >= 80"
					src="@/assets/phoneticPractice/声音-绿@3x.png" />
			</div>
			<div class="container-fraction-bottom">
				<div class="container-fraction-bottom-left">
					<div>
						完整度：<span
							:class="item.sourceObj.integrity_score < 60 ? 'autoRed' : item.sourceObj.total_score < 80 ? 'autoYellow' : 'autoGreed'">{{
                                Math.round(item.sourceObj.integrity_score) }}</span>
					</div>
					<div>
						流利度：<span
							:class="item.sourceObj.fluency_score < 60 ? 'autoRed' : item.sourceObj.total_score < 80 ? 'autoYellow' : 'autoGreed'">{{
                                Math.round(item.sourceObj.fluency_score) }}</span>
					</div>
					<div>
						准确度：<span
							:class="item.sourceObj.accuracy_score < 60 ? 'autoRed' : item.sourceObj.total_score < 80 ? 'autoYellow' : 'autoGreed'">{{
                                Math.round(item.sourceObj.accuracy_score) }}</span>
					</div>
				</div>
				<div class="container-fraction-bottom-right"
					:class="item.sourceObj.total_score < 60 ? 'autoRed' : item.sourceObj.total_score < 80 ? 'autoYellow' : 'autoGreed'">
					{{ Math.round(item.sourceObj.total_score) }}
				</div>
			</div>
		</div>
		<audio ref="audioElement" :src="audioSrc"></audio>
	</div>
</template>

<script setup>
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import AppHeader from '@/components/AppHeader.vue'
	import {
		onMounted,
		reactive,
		nextTick,
		toRefs,
		ref
	} from 'vue';
	const router = useRouter()
	const route = useRoute()
	let state = reactive({
		taskObj: {}
	})
	const moduleName = route.query.moduleName
	onMounted(() => {
		let followReadingInfo = localStorage.getItem('followReadingInfo')
		state.taskObj = JSON.parse(followReadingInfo)
	})
	const onClickLeft = () => {
		router.go(-1)
	}

	const audioSrc = ref('') //音频资源文件
	const audioElement = ref(null) //音频dom
	const playAudio = (audioUrl) => {
		// const audioUrl = URL.createObjectURL(blob);
		audioSrc.value = audioUrl
		nextTick(async () => {
			audioElement.value.play()
		})
	}

	const {
		taskObj
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.container {
		background: #F5F5F5;
		padding-bottom: 10px;
		height: 100%;
		overflow: scroll;

		.container-background {
			color: #FFFFFF;
			background: url('@/assets/phoneticPractice/背景@3x (1).png');
			background-size: contain;
			width: 100%;
			height: 280px;
			text-align: center;
			position: fixed;
			top: 0;

			.container-background-number {
				font-size: 66px;
				line-height: 97px;
			}

			.container-background-better {
				margin-top: 10px;
				font-size: 18px;
			}

			.container-background-submitTask {
				margin-top: 30px;
				font-size: 18px;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 18px;
					height: 18px;
					margin-left: 10px;
				}
			}
		}

		.fillBox {
			height: 10px;
			padding-top: 280px;
		}

		.container-task {
			padding: 10px;
			// height: 160px;
			color: #333333;
			font-size: 16px;
			line-height: 53px;
			border-radius: 15px;
			background: #ffffff;
			margin: 10px;

			.container-task-context {
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				justify-content: space-between;
			}

			.container-task-expression {
				display: flex;
				justify-content: space-around;
				align-items: center;

				div {
					display: flex;
					align-items: center;
				}

				img {
					width: 24px;
					height: 24px;
					margin-right: 10px;
				}

			}

		}

		.container-fraction {
			padding: 15px;
			color: #8E8E8E;
			font-size: 14px;
			border-radius: 15px;
			background: #ffffff;
			margin: 10px;

			.container-fraction-top {
				// margin: 10px 10px 0 10px;
				line-height: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.container-fraction-top-left {
					display: flex;
					align-items: center;

					div:nth-child(1) {
						color: #333333;
						font-weight: bold;
					}

					div:nth-child(2),
					div:nth-child(3) {
						margin-left: 10px;
					}
				}

				img {
					width: 18px;
					height: 14px;
				}

			}

			.container-fraction-bottom {
				// margin: 0 10px 15px 10px;
				line-height: 20px;
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.container-fraction-bottom-left {
					display: flex;
					align-items: center;

					div:nth-child(2),
					div:nth-child(3) {
						margin-left: 15px;
					}

					span {
						color: #FA192C;
					}
				}

				.container-fraction-bottom-right {
					color: #FA192C;
				}
			}
		}
	}


	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}
</style>